import React, { memo } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import classnames from "classnames";

import "./index.scss";
import { getSizeImage } from "@/utils/format-utils";
import rankActions from "store/action/rank";

const WYTopRanking = memo(function (props) {
  // redux
  const { rankTitList, rankCurrenIdx } = useSelector(
    (state) => ({
      rankTitList: state.getIn(["rank", "rankTitList"]),
      rankCurrenIdx: state.getIn(["rank", "rankCurrenIdx"]),
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  // qita

  const setTitle = (index) => {
    if (index === 0 || index === 4) {
      return (
        <div className="top-rank-header">
          {index === 0 ? "云音乐特色榜" : "全球媒体榜"}
        </div>
      );
    } else {
      return null;
    }
  };
  const setCurrentIdx = (idx) => {
    dispatch(rankActions.getRankCuIdx(idx));
  };

  return (
    <div className="wy-top-rank">
      {rankTitList.length > 0 &&
        rankTitList.map((item, index) => (
          <div key={item.id}>
            {setTitle(index)}
            <div
              className={classnames(
                "item",
                rankCurrenIdx === index ? "active" : ""
              )}
              onClick={(e) => setCurrentIdx(index)}
            >
              <img src={getSizeImage(item.coverImgUrl, 40)} alt="" />
              <div className="info">
                <div className="name">{item.name}</div>
                <div className="update">{item.updateFrequency}</div>
              </div>
            </div>
          </div>
        ))}
    </div>
  );
});

export default WYTopRanking;
